import React from 'react'
import { Form, Table, Icon, Tag, Modal, Steps, Button, message, Input, Row, Col, Select, DatePicker, InputNumber, Dropdown, Menu, Badge } from 'antd'
import { DropOption } from 'components'
import styles from './List.less'
import moment from "moment"

const Step = Steps.Step;
const confirm = Modal.confirm
const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input

class ModalSelect1 extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			current: 0,
			value: '',
			bottons: '查看',
			previewVisible: false,
			previewImage: '',
		};
	}
	showReturn() {
		const { showList } = this.props
		showList()
	}
	show(value) {
		const { showList, details, onEdit } = this.props
		const { validateFields, getFieldsValue } = this.props.form
		const params = getFieldsValue()
		params.state = value
		params.id = details.document.application.id
		if (params.opinion == undefined) {
			params.opinion = ''
		}
		params.type = details.document.application.type
		params.documentId = details.document.id
		onEdit(params)

	}
	bottonClick(i) {
		if (document.getElementById(i).style.display != "block") {
			document.getElementById(i).style.display = 'block'
		} else {
			document.getElementById(i).style.display = 'none'
		}
		// if(this.state.bottons == '查看'){
		// 	this.setState({bottons:"隐藏"})
		// }else{
		// 	this.setState({bottons:"查看"})
		// }
	}
	imgClick = e => {
		this.setState({ previewVisible: true, previewImage: e.target.src })
	}
	handleCancel = () => {
		this.setState({ previewVisible: false })
	}
	printDiv = () => {
        // const { showList } = this.props
        // showList()
        // this.save()
        location.reload()

        // var printContents = document.getElementById(divName).innerHTML;
        // var printContents = refs.divName;

        var printContents = this.printId.innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;

        // var dom = this.printId;
        // var win = window.open('');
        // win.document.write(dom.outerHTML);
        // win.print();
        // win.close();


    }
	render() {
		const { details, isComponent, coverDetails } = this.props
		const { getFieldDecorator } = this.props.form
		const { previewVisible, previewImage } = this.state
		const formItemLayout = {
			labelCol: { span: 4 },
			wrapperCol: { span: 16 },
		};
		var list = []
		var applyList = []
		var photoPage = []
		var Opinion = []
		if (isComponent == true) {
			Opinion.push(
				<div>
					<span style={{ fontSize: 20, marginLeft: 20, fontWeight: 600 }}>填写审核意见:</span>
					<FormItem
						label="审核意见"
						{...formItemLayout}
					>
						{getFieldDecorator('opinion', {
							rules: [{ required: false, message: '不能为空' }],
						})(
							<Input placeholder="请输入" type="textarea" rows={4} />
						)}
					</FormItem>
					<div style={{ textAlign: "center" }}>
						<Button style={{ width: 100, marginTop: 20, height: 30, marginRight: 20 }} type="primary" onClick={this.show.bind(this, 1)}>同意</Button>
						<Button style={{ width: 100, marginTop: 20, height: 30 }} type="primary" onClick={this.show.bind(this, 2)}>驳回</Button>
					</div>
				</div>
			)
		}
		if (details != undefined || details != '') {
			if (!details) {
				return null
			}

			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>档案年度:{details.document.documentYear}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>公证事项:{details.document.notarialMatters}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>申请人:{details.document.applyName}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>建档日期:{moment(details.document.createdTime).format("YYYY-MM-DD")}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>公证日期:{moment(details.document.notarizationAt).format("YYYY-MM-DD")}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>保管日期:{details.document.storageLife}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>档案页数:{details.document.pageNumber}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>承办人:{details.document.contractorUserName}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>建档人:{details.document.createdUserName}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>公证号:{details.document.notaryNumber}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>档案类型:{details.document.documentType}</li>)

			if (details.document.application != undefined) {
				applyList.push(<li style={{ width: "50%", lineHeight: "40px" }}>{"创建人"}:{details.document.application.applicantName}</li>)
				applyList.push(<li style={{ width: "50%", lineHeight: "40px" }}>{"创建时间"}:{moment(details.document.application.createdTime).format("YYYY-MM-DD HH:mm:ss")}</li>)
				applyList.push(<li style={{ width: "50%", lineHeight: "40px" }}>{"审核人"}:{details.document.application.auditorName == '' ? '暂无' : details.document.application.auditorName}</li>)
				applyList.push(<li style={{ width: "50%", lineHeight: "40px" }}>{"审核人"}:
				{details.document.application.state == 0 ?
						<span style={{ marginLeft: 10 }}><Badge status="processing" /><span>申请中</span></span> :
						details.document.application.state == 1 ?
							<span style={{ marginLeft: 10 }}><Badge status="success" /><span>通过</span></span> :
							<span style={{ marginLeft: 10 }}><Badge status="error" /><span>拒绝</span></span>
					}</li>)
				applyList.push(<li style={{ width: "100%", lineHeight: "40px" }}>{"审核意见"}:{details.document.application.opinion}</li>)
			}
			//			var menu = JSON.parse(details.document.basicInfo)

			var pages = details.document.documentBillList
			//			for(let i=0;i<menu.length;i++){
			//				list.push(<li key={i} style={{width:"50%",lineHeight:"40px"}}>{menu[i].name}:{menu[i].value}</li>)
			//			}
			for (let i = 0; i < pages.length; i++) {
				photoPage.push(
					<div>
						<div style={{ display: "flex", justifyContent: "space-between", margin: "10px 20px", background: "#f4f4f4", lineHeight: "50px", borderRadius: 5 }}>
							<span style={{ marginLeft: 10, fontWeight: 600 }}>{i + 1}.{pages[i].name} [{pages[i].billfileList.length}条]</span>
							<div style={{ marginRight: 10 }}>
								<Button type="primary"
									onClick={this.bottonClick.bind(this, i)}
									style={{ border: "1px solid #DDDDDD", marginRight: 10, color: "black", backgroundImage: "linear-gradient(180deg,#fdfdfd 0%,#dddddd 98%)" }}>
									查看
								</Button>
							</div>
						</div>
						<div id={i} style={{ overflow: "scroll", height: "200px", margin: "0 40px", display: "none" }}>
							<div className="clearfix">
								{
									pages[i].billfileList.map((item, i) => {
										return (
											<img onClick={this.imgClick} src={"http://file.sip.feelbang.com/files/" + item.url + "?token=" + sessionStorage.getItem("token") + "&" + "sys=1001"} style={{ width: 80, margin: 5 }} />
										)
									})
								}
							</div>

						</div>
					</div>
				)
			}
		}

		return (
			<div>
				<div style={{ marginBootm: 30 }}>
					<span style={{ fontSize: 20, marginLeft: 20, fontWeight: 600 }}>档案信息:</span>
					<br />
					<ul style={{ display: "flex", flexWrap: "wrap", margin: "0 10px", marginLeft: 40, width: "50%" }}>
						{list}
					</ul>
				</div>
				<div className="listLib">
					<span style={{ fontSize: 20, marginLeft: 20, fontWeight: 600 }}>卷宗目录:</span>
					<div style={{ width: '50%' }}>
						{photoPage}
					</div>
					{/*审核信息*/}

					{details.document.application == undefined ?
						"" :
						isComponent == true ?
							'' :
							<div style={{ marginBootm: 30 }}>
								<span style={{ fontSize: 20, marginLeft: 20, fontWeight: 600 }}>审核信息:</span>
								<br />
								<ul style={{ display: "flex", flexWrap: "wrap", margin: "0 10px", marginLeft: 40, width: "50%" }}>
									{applyList}
								</ul>
							</div>
					}
				</div>
				<div style={{ width: "50%" }}>
					{Opinion}
				</div>

				{/* 封面信息 */}
				<div id="text1" style={{ width: "100%", textAlign: 'center', display: 'flex', justifyContent: "center", marginBottom: 25 }}>
					{coverDetails ?
						<div ref={self => (this.printId = self)} style={{ width: 794, border: "1px dashed gray", paddingBottom: 105 }}>
							<div style={{ display: "flex", alignItems: "center", height: 110, justifyContent: "space-between" }}>
								<div style={{ marginLeft: 121, width: 218 }}>
									<div style={{ border: "1px solid gray" }}>
										<div className={styles.span} style={{ width: 80, borderRight: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 22 }}>年度</div>
										<div className={styles.span} style={{ width: 130 }}>
											<input defaultValue={coverDetails ? coverDetails.documentYear : ""} onBlur={this.yearChange} style={{ width: "100%", border: "none", outline: "none", textAlign: "center", fontFamily: "华文仿宋", fontSize: 14 }} />
										</div>
									</div>
									<div style={{ border: "1px solid gray", borderTop: 0 }}>
										<div className={styles.span} style={{ width: 80, borderRight: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 22 }}>档案</div>
										<div className={styles.span} style={{ width: 130 }}>
											<input defaultValue="" onBlur={this.documentInfoChange} style={{ width: "100%", border: "none", outline: "none", textAlign: "center", fontFamily: "华文仿宋", fontSize: 14 }} />
										</div>
									</div>
								</div>
								<div style={{ marginRight: 40 }}>
									<svg id="barcode" ref={(ref) => this._barcodeSVG = ref}></svg>
									{/* <img style={{ width: 210 }} src={require("../../../assets/barCode.png")} /> */}
								</div>
							</div>
							<div style={{ width: 618, height: 895, marginLeft: 121, border: "1px solid gray" }}>
								<div style={{ color: "black", lineHeight: "60px", fontSize: 26, fontWeight: 600, borderBottom: "1px solid black", textAlign: "center" }}>
									<p style={{ fontFamily: "SimSun", fontSize: 30 }}>四川省成都市国力公证处公证卷宗</p>
								</div>
								<div style={{ lineHeight: "60px", borderBottom: "1px solid black", letterSpacing: 5, textAlign: "center" }}>
									<p style={{ fontFamily: "FangSong", fontSize: 16 }}>(2018)川国公证涉字第     号</p>
								</div>
								<div style={{ lineHeight: "30px", borderBottom: "1px solid black", display: "flex" }}>
									<div style={{ width: 60, letterSpacing: 10, fontWeight: 600, borderRight: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 16 }}>
										<span>公证事项</span>
									</div>
									<div style={{ width: 555 }}>
										<TextArea defaultValue={coverDetails ? coverDetails.notarialMatters : ""} onBlur={this.notarialMattersChange} style={{ height: "100%", border: "none", outline: "none", resize: "none", fontFamily: "FangSong", fontSize: 22, textAlign: "center" }} />
									</div>
								</div>

								<div style={{ height: 260, display: "flex" }}>
									<div style={{ width: 60, borderRight: "1px solid black", fontWeight: 600, textAlign: "center", fontFamily: "FangSong", fontSize: 16 }}>
										<p className={styles.p} style={{ paddingTop: 70 }}>申</p>
										<p className={styles.p}>请</p>
										<p className={styles.p} style={{ paddingBottom: 100 }}>人</p>
									</div>
									<div style={{ width: 555, borderBottom: "1px solid black", height: 261 }}>
										<TextArea defaultValue={coverDetails ? coverDetails.applyName : ""} onBlur={this.applyNameChange} style={{ height: "100%", border: "none", outline: "none", resize: "none", fontFamily: "FangSong", fontSize: 22, textAlign: "center" }} />
									</div>
								</div>
								<div style={{ height: 260, display: "flex" }}>
									<div style={{ width: 60, borderRight: "1px solid black", fontWeight: 600, borderTop: "1px solid black", borderBottom: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 16 }}>
										<p className={styles.p1} style={{ paddingTop: 70 }}>备</p>
										<p className={styles.p1} style={{ paddingBottom: 70 }}>注</p>
									</div>
									<div style={{ width: 555, borderBottom: "1px solid black", borderTop: "1px solid black" }}>
										<TextArea onBlur={this.remarksChange} style={{ height: "100%", border: "none", outline: "none", resize: "none", fontFamily: "FangSong", fontSize: 22, textAlign: "center" }} />
									</div>
								</div>
								<div style={{ display: "flex", lineHeight: "58px" }}>
									<div style={{ width: "33.3%", borderRight: "1px solid black", display: "flex" }}>
										<div style={{ width: "50%", borderRight: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 16, fontWeight: 600 }}>收件日期</div>
										<div style={{ width: "50%" }}>
											<input onBlur={this.collectionAtChange} defaultValue="" style={{ border: "none", outline: "none", textAlign: "center", width: "100%", fontFamily: "苹方", fontSize: 12 }} />
										</div>
									</div>
									<div style={{ width: "33.3%", borderRight: "1px solid black", display: "flex" }}>
										<div style={{ width: "51%", borderRight: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 16, fontWeight: 600 }}>公证日期</div>
										<div style={{ width: "50%" }}>
											<input onBlur={this.notarizationAtChange} defaultValue={coverDetails ? coverDetails.notarizationAt : ""} style={{ border: "none", outline: "none", textAlign: "center", width: "100%", fontFamily: "苹方", fontSize: 12 }} />
										</div>
									</div>
									<div style={{ width: "33.3%", display: "flex" }}>
										<div style={{ width: "50%", borderRight: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 16, fontWeight: 600 }}>归档日期</div>
										<div style={{ width: "50%" }}>
											<input onBlur={this.archiveAtChange} defaultValue={moment().format('YYYY-MM-DD')} style={{ border: "none", outline: "none", textAlign: "center", width: "100%", fontFamily: "苹方", fontSize: 12 }} />
										</div>
									</div>
								</div>
								<div style={{ display: "flex", lineHeight: "58px", borderTop: "1px solid black" }}>
									<div style={{ width: "50%", borderRight: "1px solid black", display: "flex" }}>
										<div style={{ width: "50%", borderRight: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 16, fontWeight: 600 }}>承办人</div>
										<div style={{ width: "50%" }}>
											<input onBlur={this.contractorChange} defaultValue={coverDetails ? coverDetails.contractorName : ""} style={{ border: "none", outline: "none", textAlign: "center", width: "100%", fontFamily: "仿宋", fontSize: 14 }} />
										</div>
									</div>
									<div style={{ width: "50%", display: "flex" }}>
										<div style={{ width: "50%", borderRight: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 16, fontWeight: 600 }}>制档人</div>
										<div style={{ width: "50%" }}>
											<input onBlur={this.documentCreaterChange} defaultValue={coverDetails ? coverDetails.documentCreaterName : ""} style={{ border: "none", outline: "none", textAlign: "center", width: "100%", fontFamily: "仿宋", fontSize: 14 }} />
										</div>
									</div>
								</div>
								<div style={{ display: "flex", lineHeight: "58px", borderTop: "1px solid black" }}>
									<div style={{ width: "50%", borderRight: "1px solid black", display: "flex" }}>
										<div style={{ width: "50%", borderRight: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 16, fontWeight: 600 }}>保管期限</div>
										<div style={{ width: "50%" }}>
											<input onBlur={this.keepTermChange} defaultValue={coverDetails ? coverDetails.storageLife : ""} style={{ height: 56, border: "none", outline: "none", textAlign: "center", width: "100%", fontFamily: "仿宋", fontSize: 14 }} />
										</div>
									</div>
									<div style={{ width: "50%", textAlign: "center", fontFamily: "FangSong", fontSize: 16, fontWeight: 600 }}>
										本卷共&nbsp;&nbsp;&nbsp;
                                    <input onBlur={this.documentCountChange} defaultValue={coverDetails ? coverDetails.pageNumber : ""} style={{ height: 56, border: "none", outline: "none", textAlign: "center" }} />
										&nbsp;&nbsp;&nbsp;张
                            		</div>
								</div>
							</div>
						</div> : <p style={{ fontSize: 20, marginTop: 20 }}>暂无封面信息</p>}
				</div>
				{coverDetails ?
					<div style={{textAlign:"center"}}>
						<Button style={{ width: 200, marginTop: 30, height: 40 }} onClick={this.printDiv} type="primary" >打印封面</Button>
					</div>:""
				}
				
				<Button style={{ width: 200, marginTop: 30, height: 40 }} type="primary" onClick={this.showReturn.bind(this)}>返回</Button>
				<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
					<img alt="example" style={{ width: '100%' }} src={previewImage} />
				</Modal>
			</div>
		)
	}


}

export default Form.create()(ModalSelect1)
